<template>
    <div class="app-container">
        <el-card shadow="never" v-loading="loading">
            <el-row :gutter="5">
                <el-col :span="24" class="main-card-view">
                    <el-row>
                        <el-card shadow="never" class="top-search-view-card">
                            <el-row>
                                <el-form :inline="true" :model="searchForm" class="demo-form-inline search-view">
                                    <el-form-item label="字典名称">
                                        <el-input v-model="searchForm.dictionaryName" placeholder="请输入字典名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="字典编码">
                                        <el-input v-model="searchForm.dictionaryCode" placeholder="请输入字典编码"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="handleSearch" class="search-button">查询</el-button>
                                        <!--                                        <el-button type="success" @click="handleReset" class="reset-button">重置</el-button>-->
                                        <el-button type="primary" @click="showCreateDialog"
                                            class="new-button">添加</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </el-card>
                    </el-row>

                    <el-row>
                        <el-card shadow="never">
                            <el-table :data="tableData" :stripe="true" style="width: 100%">
                      
                                <el-table-column prop="groupName" align="center" label="分组" />
                                <el-table-column prop="dictionaryName" align="center" label="名称">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="showDictionaryName(scope.row)">{{
                                            scope.row.dictionaryName }}</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="dictionaryCode" align="center" label="编码" />
                                <el-table-column align="center" label="操作" width="200">
                                    <template slot-scope="scope">
                                        <!--                                        <el-button type="text" class="table-details-btn"-->
                                        <!--                                                   @click="handleDetails(scope.$index, scope.row)"></el-button>&lt;!&ndash;详情&ndash;&gt;-->
                                        <el-button type="text" class="table-edit-btn"
                                            @click="showEditDialog(scope.$index, scope.row)"></el-button><!--编辑-->
                                        <el-button type="text" class="table-delete-btn"
                                            @click="handleDelete(scope.$index, scope.row)"></el-button><!--删除-->
                                    </template>
                                </el-table-column>
                            </el-table>
                            <XPagination ref="pageInfo" :total="total" :get-data="getList" />
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form label-width="80px" ref="form" :model="form" :rules="formRules">
                <el-form-item label="字典名称" prop="dictionaryName">
                    <el-input v-model="form.dictionaryName" />
                </el-form-item>
                <el-form-item label="字典编码" prop="dictionaryCode">
                    <el-input v-model="form.dictionaryCode" />
                </el-form-item>
                <el-form-item label="分组" prop="dictionaryCode">
                    <el-select v-model="form.groupName" placeholder="请选择">
                        <el-option v-for="item in options" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="primary" @click="handleSave">保存</el-button>
            </template>
        </el-dialog>
        <el-dialog title="字典项信息" :visible.sync="dialogDictionaryName">
            <el-form label-width="80px" ref="form" :model="form" style="display: flex;flex-wrap: wrap;">
                <el-form-item label="字典名称" prop="dictionaryName" style="width: 49%;">
                    <el-input v-model="form.dictionaryName" disabled />
                </el-form-item>
                <el-form-item label="字典编码" prop="dictionaryCode" style="width: 49%;">
                    <el-input v-model="form.dictionaryCode" disabled />
                </el-form-item>
                <el-form-item label="分组" prop="groupName" style="width: 49%;">
                    <el-input v-model="form.groupName" disabled />
                </el-form-item>
            </el-form>
            <el-button style="margin-bottom: 30px;" type="primary" @click="addDict">添加字典项</el-button>
            <el-table :data="dictData" :stripe="true" style="width: 100%">
                <el-table-column prop="sort" align="center" label="序号" width="70" />
                <el-table-column prop="name" align="center" label="名称" />
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" class="table-edit-btn" @click="showEditDict(scope.row)"></el-button><!--编辑-->
                        <el-button type="text" class="table-delete-btn" @click="dictDelete(scope.row)"></el-button><!--删除-->
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog :title="dictTitle" :visible.sync="dictDialog" width="30%">
            <el-form label-width="80px" ref="dictForm" :model="dictForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="dictForm.name" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="dictForm.sort" />
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="primary" @click="dictSave">保存</el-button>
            </template>
        </el-dialog>



    </div>
</template>

<script>
import XPagination from "../../components/xpagination/XPagination";
import * as dictionaryInfo from "../../api/dictionaryInfo"
import * as formUtils from "../../utils/formUtils";
export default {
    name: "list",
    components: { XPagination },
    data () {
        return {
            searchForm: {
                dictionaryName: "",
                dictionaryCode: "",
            },
            tableData: [],
            dictData: [],
            loading: false,
            dialogVisible: false,
            dialogDictionaryName: false,
            dictDialog: false,
            total: 0,
            dialogTitle: "添加字典",
            form: {
                uid: "",
                dictionaryName: "",
                dictionaryCode: "",
            },
            dictForm: {},
            dictTitle: '添加字典项',
            editStatus: "add",
            formRules: {
                dictionaryName: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                dictionaryCode: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
            },

            options: ["机构", "专家", "民族"]
        }
    },
    methods: {
        getList (pageInfo) {
            const param = {
                ...this.searchForm,
                ...pageInfo
            }
            dictionaryInfo.queryByPage(param).then(response => {
                console.log(response)
                this.tableData = response.data.data.rows
                this.total = response.data.data.total
                this.loading = false
            }).catch(error => {
                console.log(error)
            })
        },
        handleDelete (index, data) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const param = {
                    uid: data.uid,
                }
                this.loading = true
                dictionaryInfo.deleteById(param).then(result => {
                    this.loading = false
                    this.$message.success(result.data.msg)
                    this.handleSearch()
                }).catch(error => {
                    this.loading = false
                    console.log(error)
                })
            }).catch(() => {
                console.log('取消删除')
            });
        },
        handleSearch () {
            this.$refs.pageInfo.loadData()
        },
        showCreateDialog () {
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.dialogTitle = "添加字典"
                this.editStatus = "add"
                this.$refs.form.resetFields()
                this.form = Object.assign({}, this.$options.data().form)
            })
        },
        handleSave () {
            if (this.editStatus === "add") {
                this.handleAdd()
            } else {
                this.handleEdit()
            }
        },
        handleAdd () {
            this.$refs["form"].validate((valid) => {
                if (!valid) {
                    return false
                }
                const param = Object.assign({}, this.form)
                formUtils.filterFormFields(param)
                dictionaryInfo.insert(param).then(result => {
                    this.$message.success(result.data.msg)
                    this.dialogVisible = false
                    this.handleSearch()
                }).catch(error => {
                    this.$message.error(error)
                    console.log(error)
                })
            })
        },
        handleEdit () {
            this.$refs["form"].validate((valid) => {
                if (!valid) {
                    return false
                }
                const param = Object.assign({}, this.form)
                formUtils.filterFormFields(param)
                dictionaryInfo.update(param).then(result => {
                    this.$message.success(result.data.msg)
                    this.dialogVisible = false
                    this.handleSearch()
                }).catch(error => {
                    this.$message.error(error)
                    console.log(error)
                })
            })
        },
        showEditDialog (index, data) {
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs.form.resetFields()
                this.form = Object.assign({}, data)
                this.dialogTitle = "编辑字典"
                this.editStatus = "edit"
            })
        },
        showDictionaryName (data) {
            this.dialogDictionaryName = true
            this.form = Object.assign({}, data)
            this.getDict(data.uid)
        },
        getDict (data) {
            const param = {
                dictInfoUid: data
            }
            dictionaryInfo.queryDictionary(param).then(response => {
                this.dictData = response.data.data.rows
                this.dictData.sort((a,b)=>{
                    return a.sort - b.sort
                })
            }).catch(error => {
                console.log(error)
            })
        },
        addDict () {
            this.dictTitle = '添加字典项'
            this.dictForm = {}
            this.dictDialog = true
        },
        showEditDict (data) {
            this.dictForm = Object.assign({}, data)
            this.dictTitle = '编辑字典项'
            this.dictDialog = true
        },
        dictSave () {
            if (this.dictTitle === '添加字典项') {
                this.dictAdd()
            } else if (this.dictTitle === '编辑字典项') {
                this.dictEdit()
            }
        },
        dictAdd () {
            const param = {
                name: this.dictForm.name,
                dictInfoUid: this.form.uid,
                lastDict:this.form.dictionaryCode,
                sort: this.dictForm.sort
            }
            dictionaryInfo.insertDictionary(param).then(result => {
                this.$message.success(result.data.msg)
                this.dictDialog = false
                this.getDict(param.dictInfoUid)
            }).catch(error => {
                this.$message.error(error)
                console.log(error)
            })
        },
        dictEdit () {
            const param = {
                name: this.dictForm.name,
                dictInfoUid: this.form.uid,
                lastDict:this.form.dictionaryCode,
                sort: this.dictForm.sort,
                uid: this.dictForm.uid
            }
            dictionaryInfo.updateDictionary(param).then(result => {
                this.$message.success(result.data.msg)
                this.dictDialog = false
                this.getDict(param.dictInfoUid)
            }).catch(error => {
                this.$message.error(error)
                console.log(error)
            })
        },
        dictDelete (data) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const param = {
                    uid: data.uid,
                }
                this.loading = true
                dictionaryInfo.deleteDictionary(param).then(result => {
                    this.loading = false
                    this.$message.success(result.data.msg)
                    this.getDict(data.dictInfoUid)
                }).catch(error => {
                    console.log(error)
                })
            }).catch(() => {
                console.log('取消删除')
            });
        }
    },
    mounted () {
        this.handleSearch()
    }
}
</script>

<style scoped lang="scss"></style>
